<template>
	<view class="page-container">
		<!-- 搜索栏 -->
		<SearchBar 
			:value="keyword" 
			@input="keyword = $event" 
			@confirm="onSearch"
			@click="navigateToSearch"
		/>
		
		<!-- 轮播图 -->
		<swiper 
			class="banner" 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="3000" 
			:duration="500"
			indicator-active-color="#e5394d"
		>
			<swiper-item v-for="(item, index) in banners" :key="index">
				<image :src="item.image" mode="aspectFill" class="banner-image" @click="onBannerClick(item)"></image>
			</swiper-item>
		</swiper>
		
		<!-- 分类导航 -->
		<view class="category-nav">
			<view 
				v-for="(item, index) in categories" 
				:key="index" 
				class="category-item"
				@click="onCategoryClick(item)"
			>
				<view class="category-icon bg-primary-light radius-circle">
					<text class="iconfont text-theme">{{ item.icon }}</text>
				</view>
				<text class="category-name">{{ item }}</text>
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="product-list-title">
			<text class="title-text">精选樱桃</text>
			<text class="more-text" @click="onMoreClick">查看更多</text>
		</view>
		
		<view class="product-list">
			<view 
				v-for="(product, index) in productList" 
				:key="product.id"
				class="product-item"
			>
				<ProductCard :product="product" @click="onProductClick(product)" />
			</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<text v-if="loading">加载中...</text>
			<text v-else @click="loadMore">加载更多</text>
		</view>
		<view class="no-more" v-else>
			<text>没有更多了</text>
		</view>
		
		<!-- 回到顶部 -->
		<view class="back-to-top" v-if="showBackToTop" @click="scrollToTop">
			<text class="iconfont">↑</text>
		</view>
	</view>
</template>

<script>
import SearchBar from '@/components/SearchBar.vue';
import ProductCard from '@/components/ProductCard.vue';
import request, { get } from '@/utils/request.js';
import { navigateTo } from '@/utils/common.js';

export default {
	components: {
		SearchBar,
		ProductCard
	},
	data() {
		return {
			keyword: '',
			loading: false,
			page: 1,
			limit: 10,
			hasMore: true,
			showBackToTop: false,
			productList: [],
			categories: [],
			banners: [
				{
					id: '1',
					image: '/static/images/banners/banner1.png',
					link: '/pages/product/detail?id=1'
				},
				{
					id: '2',
					image: '/static/images/banners/banner2.png',
					link: '/pages/product/detail?id=2'
				},
				{
					id: '3',
					image: '/static/images/banners/banner3.png',
					link: '/pages/product/detail?id=3'
				}
			]
		};
	},
	onLoad() {
		this.getProductList();
		this.getCategories();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.hasMore = true;
		this.productList = [];
		
		Promise.all([
			this.getProductList(),
			this.getCategories()
		]).then(() => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if (this.hasMore && !this.loading) {
			this.loadMore();
		}
	},
	onPageScroll(e) {
		this.showBackToTop = e.scrollTop > 300;
	},
	methods: {
		// 获取商品列表
		async getProductList() {
			try {
				this.loading = true;
				const res = await get('/api/product/list', {
					page: this.page,
					limit: this.limit
				});
				
				if (this.page === 1) {
					this.productList = res;
				} else {
					this.productList = [...this.productList, ...res];
				}
				
				this.hasMore = res.length === this.limit;
				this.page++;
			} catch (error) {
				console.error('获取商品列表失败', error);
			} finally {
				this.loading = false;
			}
		},
		
		// 获取分类列表
		async getCategories() {
			try {
				const res = await get('/api/product/categories');
				this.categories = res;
			} catch (error) {
				console.error('获取分类列表失败', error);
			}
		},
		
		// 加载更多
		loadMore() {
			if (this.loading) return;
			this.getProductList();
		},
		
		// 搜索
		onSearch(keyword) {
			navigateTo(`/pages/product/search?keyword=${keyword}`);
		},
		
		// 跳转到搜索页
		navigateToSearch() {
			navigateTo('/pages/product/search');
		},
		
		// 点击轮播图
		onBannerClick(banner) {
			navigateTo(banner.link);
		},
		
		// 点击分类
		onCategoryClick(category) {
			navigateTo(`/pages/product/search?category=${category}`);
		},
		
		// 点击商品
		onProductClick(product) {
			navigateTo(`/pages/product/detail?id=${product.id}`);
		},
		
		// 查看更多
		onMoreClick() {
			navigateTo('/pages/product/search');
		},
		
		// 返回顶部
		scrollToTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		}
	}
};
</script>

<style lang="scss">
@import '@/styles/variables.scss';

.page-container {
	padding-bottom: 100rpx;
}

.banner {
	width: 100%;
	height: 300rpx;
	margin-bottom: $spacing-base;
	
	.banner-image {
		width: 100%;
		height: 100%;
	}
}

.category-nav {
	display: flex;
	flex-wrap: wrap;
	padding: $spacing-base;
	background-color: #fff;
	margin-bottom: $spacing-base;
	
	.category-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: $spacing-sm 0;
		
		.category-icon {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: $spacing-xs;
			
			.iconfont {
				font-size: $font-size-lg;
			}
		}
		
		.category-name {
			font-size: $font-size-sm;
			color: $text-color-secondary;
		}
	}
}

.product-list-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-base;
	background-color: #fff;
	margin-bottom: $spacing-base;
	
	.title-text {
		font-size: $font-size-lg;
		font-weight: bold;
		color: $text-color-primary;
		position: relative;
		padding-left: $spacing-sm;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 6rpx;
			height: 30rpx;
			background-color: $primary-color;
			border-radius: $border-radius-xs;
		}
	}
	
	.more-text {
		font-size: $font-size-sm;
		color: $text-color-secondary;
	}
}

.product-list {
	padding: 0 $spacing-base;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	.product-item {
		width: 48%;
		margin-bottom: $spacing-base;
	}
}

.load-more,
.no-more {
	text-align: center;
	padding: $spacing-base 0;
	color: $text-color-secondary;
	font-size: $font-size-sm;
}

.back-to-top {
	position: fixed;
	right: $spacing-lg;
	bottom: 180rpx;
	width: 80rpx;
	height: 80rpx;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.iconfont {
		font-size: $font-size-lg;
	}
}
</style>
